CSS-i vaateakna ühikute meisterlik kasutamine: põhjalik juhend reageeriva disaini kohta

Pidevalt arenevas veebiarenduse maailmas on esmatähtis luua reageerivaid disaine, mis kohanduvad sujuvalt erinevate ekraanisuurustega. CSS-i vaateakna ühikud (vw, vh, vmin, vmax, vi ja vb) pakuvad selle saavutamiseks võimsat viisi, pakkudes paindlikku ja skaleeritavat lähenemist elementide suuruse määramisel vastavalt vaateaknale. See põhjalik juhend süveneb vaateakna ühikute keerukustesse, uurides nende funktsionaalsust, praktilisi rakendusi ja parimaid rakendustavasid.

Vaateakna ühikute mõistmine

Vaateakna ühikud on CSS-i suhtelised pikkusühikud, mis põhinevad brauseri vaateakna suurusel. Erinevalt fikseeritud ühikutest nagu pikslid (px), mis jäävad ekraani suurusest olenemata konstantseks, kohandavad vaateakna ühikud oma väärtusi dünaamiliselt vastavalt vaateakna mõõtmetele. See kohanemisvõime muudab need ideaalseks voolavate ja reageerivate küljenduste loomiseks, mis näevad head välja igas seadmes, alates nutitelefonidest kuni suurte lauaarvutite monitorideni. Peamine eelis on see, et vaateakna ühikutega ehitatud disainid skaleeruvad harmooniliselt, säilitades proportsioonid ja visuaalse atraktiivsuse erinevatel ekraaniresolutsioonidel.

Põhilised vaateakna ühikud: vw, vh, vmin, vmax

• vw (Viewport Width): Esindab 1% vaateakna laiusest. Näiteks 10vw on võrdne 10%-ga vaateakna laiusest.
• vh (Viewport Height): Esindab 1% vaateakna kõrgusest. Sarnaselt võrdub 50vh 50%-ga vaateakna kõrgusest.
• vmin (Viewport Minimum): Esindab väiksemat väärtust vw ja vh vahel. Kui vaateaken on laiem kui kõrge, on vmin võrdne vh-ga. Vastupidi, kui vaateaken on kõrgem kui lai, on vmin võrdne vw-ga. See on kasulik proportsioonide säilitamiseks, eriti ruudukujuliste või peaaegu ruudukujuliste elementide puhul.
• vmax (Viewport Maximum): Esindab suuremat väärtust vw ja vh vahel. Kui vaateaken on laiem kui kõrge, on vmax võrdne vw-ga. Kui vaateaken on kõrgem kui lai, on vmax võrdne vh-ga. Seda kasutatakse sageli siis, kui soovite, et element täidaks vaateakna suurima võimaliku mõõtme.

Loogilised vaateakna ühikud: vi, vb

Uuemad loogilised vaateakna ühikud, vi ja vb, on vastavalt seotud vaateakna *inline* (reasisene) ja *block* (plokk) mõõtmetega. Need ühikud on tundlikud dokumendi kirjutamisrežiimi ja teksti suuna suhtes, mis muudab need eriti kasulikuks rahvusvahelistele veebisaitidele. See võimaldab luua küljendusi, mis on olemuslikult kohandatavad erinevatele kirjasüsteemidele.

• vi (Viewport Inline): Esindab 1% vaateakna reasisesest suurusest, mis on suund, kuhu sisu horisontaalselt voolab (nt enamikes lääne keeltes vasakult paremale). Vasakult paremale kirjutamisrežiimis käitub vi sarnaselt vw-ga. Kuid paremalt vasakule kirjutamisrežiimis (nagu araabia või heebrea keeles) esindab vi endiselt horisontaalset mõõdet, kuid algab vaateakna paremast servast.
• vb (Viewport Block): Esindab 1% vaateakna ploki suurusest, mis on suund, kuhu sisu vertikaalselt voolab. See on analoogne vh-ga enamikes levinud kirjutamisrežiimides.

Näide: Vaatleme veebisaiti, mis on loodud nii inglise (vasakult paremale) kui ka araabia (paremalt vasakule) keele jaoks. Kasutades konteineri külgedel polstri või veerise jaoks vi-d, kohandub see automaatselt õigele poolele vastavalt keele suunale, tagades ühtlase vahe olenemata kasutaja keele-eelistusest.

Vaateakna ühikute praktilised rakendused

Vaateakna ühikuid saab kasutada mitmesugustes stsenaariumides, et luua reageerivaid ja visuaalselt atraktiivseid veebiküljendusi. Siin on mõned levinud kasutusjuhud:

1. Täiskõrgusega jaotised

Täiskõrgusega jaotiste loomine, mis ulatuvad üle kogu vaateakna, on levinud disainimuster. Vaateakna ühikud muudavad selle uskumatult lihtsaks:

            .full-height-section {
 height: 100vh;
 width: 100vw; /* Tagab, et see täidab ka kogu laiuse */
}

            

              
                Copy
              
            
          

See koodilõik tagab, et element .full-height-section hõivab alati kogu vaateakna kõrguse, olenemata ekraani suurusest. width: 100vw; tagab, et element täidab ka kogu laiuse, luues tõeliselt täisvaateakna jaotise.

2. Reageeriv tüpograafia

Vaateakna ühikuid saab kasutada reageeriva tüpograafia loomiseks, mis skaleerub proportsionaalselt vaateakna suurusega. See tagab, et tekst jääb loetavaks ja visuaalselt atraktiivseks kõigis seadmetes.

            h1 {
 font-size: 8vw; /* Fondi suurus skaleerub vastavalt vaateakna laiusele */
}

p {
 font-size: 2vh; /* Fondi suurus skaleerub vastavalt vaateakna kõrgusele */
}

            

              
                Copy
              
            
          

Selles näites on elemendi h1 font-size seatud väärtusele 8vw, mis tähendab, et see on 8% vaateakna laiusest. Vaateakna laiuse muutudes kohandub ka fondi suurus vastavalt. Sarnaselt on elemendi p font-size seatud väärtusele 2vh, skaleerudes koos vaateakna kõrgusega.

3. Kuvasuhtega kastid

Piltide ja videote kuvasuhete säilitamine võib olla keeruline, kuid vaateakna ühikud koos padding-top trikiga pakuvad lihtsa lahenduse:

            .aspect-ratio-box {
 width: 100%;
 position: relative;
}

.aspect-ratio-box::before {
 content: "";
 display: block;
 padding-top: 56.25%; /* 16:9 kuvasuhe (kõrgus/laius * 100) */
}

.aspect-ratio-box > * {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}

            

              
                Copy
              
            
          

See tehnika kasutab pseudoelementi (::before) koos padding-top väärtusega, mis on arvutatud soovitud kuvasuhte alusel (antud juhul 16:9). Sisu elemendi .aspect-ratio-box sees paigutatakse seejärel absoluutselt, et täita olemasolev ruum, säilitades kuvasuhte olenemata ekraani suurusest. See on äärmiselt kasulik videote või piltide manustamiseks, mis peavad säilitama oma proportsioonid.

4. Voolavate võrgustikuküljenduste loomine

Vaateakna ühikuid saab kasutada voolavate võrgustikuküljenduste loomiseks, kus veerud ja read kohanduvad proportsionaalselt vaateakna suurusega. See võib olla eriti kasulik armatuurlaudade ja muude keerukate küljenduste loomisel.

            .grid-container {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(20vw, 1fr)); /* Iga veerg on vähemalt 20% vaateakna laiusest */
 grid-gap: 1vw;
}

.grid-item {
 padding: 1vw;
 background-color: #f0f0f0;
}

            

              
                Copy
              
            
          

Siin kasutab omadus grid-template-columns väärtust minmax(20vw, 1fr), et tagada iga veeru laius vähemalt 20% vaateakna laiusest, kuid see võib kasvada, et täita olemasolev ruum. Ka grid-gap on seatud kasutades 1vw, tagades, et vahe võrgustiku elementide vahel skaleerub proportsionaalselt vaateakna suurusega.

5. Reageeriv vahekaugus ja polsterdus

Vahekauguse ja polsterduse kontrollimine vaateakna ühikutega tagab ühtlase visuaalse harmoonia erinevates seadmetes. See tagab, et elemendid ei tundu liiga kokkusurutud ega liiga laialivalguvad, olenemata ekraani suurusest.

            .container {
 padding: 5vw;
 margin-bottom: 3vh;
}

            

              
                Copy
              
            
          

Selles näites on elemendil .container polsterdus, mis on 5% vaateakna laiusest igal küljel ja alumine veeris, mis on 3% vaateakna kõrgusest.

6. Skaleeritavad kasutajaliidese elemendid

Nuppe, sisestusvälju ja muid kasutajaliidese elemente saab muuta reageerivamaks, suurustades neid vaateakna ühikute abil. See võimaldab kasutajaliidese komponentidel säilitada oma suhtelised proportsioonid, parandades kasutajakogemust erinevatel ekraanidel.

            .button {
 font-size: 2.5vh;
 padding: 1vh 2vw;
 border-radius: 0.5vh;
}

            

              
                Copy
              
            
          

Klass .button on määratletud fondi suurusega, mis põhineb vaateakna kõrgusel (2.5vh), ja polsterdusega, mis põhineb nii vaateakna kõrgusel kui ka laiusel. See tagab, et nupu tekst jääb loetavaks ja nupu suurus kohandub sobivalt erinevate ekraanimõõtmetega.

Parimad tavad vaateakna ühikute kasutamiseks

Kuigi vaateakna ühikud pakuvad võimsat viisi reageerivate disainide loomiseks, on oluline neid kasutada arukalt ja järgida parimaid tavasid, et vältida võimalikke lõkse:

1. Kaaluge miinimum- ja maksimumväärtusi

Vaateakna ühikud võivad mõnikord viia äärmuslike väärtusteni väga väikestel või väga suurtel ekraanidel. Selle vältimiseks kaaluge CSS-i funktsioonide min(), max() ja clamp() kasutamist, et seada vaateakna ühiku väärtustele miinimum- ja maksimumpiirid.

            h1 {
 font-size: clamp(2rem, 8vw, 5rem); /* Fondi suurus on vähemalt 2rem, maksimaalselt 5rem ja skaleerub vahepeal vastavalt vaateakna laiusele */
}

            

              
                Copy
              
            
          

Funktsioon clamp() võtab kolm argumenti: miinimumväärtus, eelistatud väärtus ja maksimumväärtus. Selles näites on font-size vähemalt 2rem, maksimaalselt 5rem ja skaleerub proportsionaalselt vaateakna laiusega (8vw) nende piiride vahel. See hoiab ära teksti muutumise liiga väikeseks väikestel ekraanidel või liiga suureks suurtel ekraanidel.

2. Kombineerige teiste ühikutega

Vaateakna ühikud toimivad kõige paremini, kui neid kombineerida teiste CSS-i ühikutega, nagu em, rem ja px. See võimaldab teil luua nüansirikkama ja paindlikuma disaini, mis võtab arvesse nii vaateakna suurust kui ka sisu konteksti.

            p {
 font-size: calc(1rem + 0.5vw); /* Baasfondi suurus 1rem pluss skaleerimistegur */
 line-height: 1.6;
}

            

              
                Copy
              
            
          

Selles näites arvutatakse font-size funktsiooni calc() abil, mis lisab baasfondi suurusele 1rem skaleerimisteguri 0.5vw. See tagab, et tekst on alati loetav, isegi väikestel ekraanidel, samal ajal skaleerudes proportsionaalselt vaateakna suurusega.

3. Testige erinevates seadmetes ja brauserites

Nagu iga veebiarenduse tehnika puhul, on ülioluline testida oma disaine erinevates seadmetes ja brauserites, et tagada brauseriteülene ühilduvus ja optimaalne jõudlus. Kasutage brauseri arendajatööriistu erinevate ekraanisuuruste ja resolutsioonide simuleerimiseks ning testige oma disaine võimaluse korral ka tegelikes füüsilistes seadmetes. Kuigi üldiselt hästi toetatud, võivad brauserite vahel esineda peeneid erinevusi.

4. Arvestage ligipääsetavusega

Kasutades vaateakna ühikuid tüpograafia jaoks, veenduge, et tekst jääb loetavaks ja ligipääsetavaks puuetega kasutajatele. Pöörake tähelepanu värvikontrastile, fondi suurusele ja reavahele, et tagada teksti lihtne lugemine kõigile kasutajatele. Tööriistad nagu WebAIM-i kontrasti kontrollija võivad olla abiks sobivate värvikontrasti suhete määramisel. Samuti vältige `font-size` või muude suurusega seotud omaduste seadmist otse `html`-elemendile vaateakna ühikutega, kuna see võib segada kasutaja eelistusi teksti suuruse osas.

5. Kasutage koos CSS-i muutujatega (kohandatud omadused)

CSS-i muutujate (kohandatud omaduste) kasutamine koos vaateakna ühikutega parandab hooldatavust ja võimaldab lihtsamaid kohandusi kogu stiililehel.

            :root {
 --base-padding: 2vw;
}

.element {
 padding: var(--base-padding);
}

.another-element {
 margin-left: var(--base-padding);
}

            

              
                Copy
              
            
          

Selles näites on muutuja --base-padding defineeritud väärtusega 2vw. Seda muutujat kasutatakse seejärel erinevate elementide polsterduse ja veerise seadmiseks, mis võimaldab teil hõlpsasti kohandada vahekaugust kogu veebisaidil, muutes muutuja väärtust ühes kohas.

Täiustatud tehnikad ja kaalutlused

1. JavaScripti kasutamine dünaamilisteks kohandusteks

Teatud stsenaariumides võib teil tekkida vajadus dünaamiliselt kohandada vaateakna ühiku väärtusi vastavalt kasutaja interaktsioonidele või muudele sündmustele. JavaScripti saab kasutada vaateakna mõõtmete hankimiseks ja CSS-i muutujate vastavaks värskendamiseks.

            // JavaScript
function updateViewportVariables() {
 const vh = window.innerHeight * 0.01;
 document.documentElement.style.setProperty('--vh', `${vh}px`);
}

window.addEventListener('resize', updateViewportVariables);
updateViewportVariables(); // Esmakutse

// CSS
.element {
 height: calc(var(--vh, 1vh) * 50); /* Tagavara 1vh, kui --vh pole defineeritud */
}

            

              
                Copy
              
            
          

See koodilõik kasutab JavaScripti vaateakna kõrguse arvutamiseks ja vastava CSS-i muutuja (--vh) seadmiseks. Element .element kasutab seejärel seda muutujat oma kõrguse seadmiseks, tagades, et see hõivab alati 50% vaateakna kõrgusest. Tagavara 1vh tagab, et elemendil on mõistlik kõrgus ka siis, kui CSS-i muutuja pole õigesti seadistatud.

2. Mobiilse klaviatuuri nähtavuse haldamine

Mobiilseadmetes võib vaateakna suurus muutuda, kui kuvatakse virtuaalne klaviatuur. See võib põhjustada probleeme küljendustega, mis tuginevad täiskõrgusega jaotiste jaoks vaateakna ühikutele. Üks lähenemine selle leevendamiseks on kasutada suuri, väikeseid ja dünaamilisi vaateakna ühikuid, mis võimaldavad arendajatel nende stsenaariumide käitumist täpsustada. Need on saadaval ühikutega lvh, svh ja dvh. Ühik dvh kohandub, kui ekraaniklaviatuur kuvatakse. Pange tähele, et tugi võib mõnes vanemas brauseris olla piiratud.

            .full-height-section {
 height: 100dvh;
}

            

              
                Copy
              
            
          

3. Jõudluse optimeerimine

Kuigi vaateakna ühikud on üldiselt jõudsad, võib nende liigne kasutamine potentsiaalselt mõjutada lehe renderdamise kiirust. Jõudluse optimeerimiseks vältige vaateakna ühikute kasutamist igal üksikul elemendil oma lehel. Selle asemel keskenduge nende strateegilisele kasutamisele peamiste küljenduskomponentide ja tüpograafia jaoks. Samuti minimeerige kordade arvu, mil arvutate JavaScriptis vaateakna ühiku väärtusi ümber.

Näited erinevatest riikidest ja kultuuridest

Vaateakna ühikute ilu seisneb selles, et need aitavad luua ühtlase kasutajakogemuse erinevates paikades. Uurime, kuidas saab vaateakna ühikuid rakendada kultuurilisi kaalutlusi arvestades:

• Ida-Aasia keeled (nt hiina, jaapani, korea): Need keeled nõuavad sageli suuremaid fondisuurusi märkide keerukuse tõttu. Vaateakna ühikud tagavad loetavuse mobiilseadmetes, kus ekraanipind on piiratud. Eriti kasulik võib olla clamp() kasutamine koos kõrgema miinimumfondi suurusega, mis põhineb rem-ühikutel koos vw-ga.
• Paremale-vasakule keeled (nt araabia, heebrea): Loogilised vaateakna ühikud (vi, vb) on hindamatud ühtlase küljenduse suuna ja vahekauguse säilitamisel, eriti peegeldatud küljenduste ja kohandatud sisuvoo puhul.
• Erineva internetikiirusega riigid: Piltide suuruste optimeerimine ja kiirete laadimisaegade tagamine on ülioluline. Vaateakna ühikutega loodud kuvasuhtega kastid võimaldavad piltidel ja videotel säilitada oma proportsioonid, kohandudes samal ajal väiksemate failisuurustega kiiremaks laadimiseks aeglasemate ühenduste puhul.
• Ligipääsetavus kultuurideüleselt: Kombinatsioon rem-ist baasfondi suuruse jaoks ja vw-st skaleerimiseks pakub kasutajatele paindlikkust suuruse muutmiseks vastavalt nende individuaalsetele vajadustele, olenemata nende geograafilisest asukohast või kultuurilisest kontekstist. Kasutajatele fondi suuruse reguleerimise võimaluste pakkumine on universaalselt kasulik.

Kokkuvõte

CSS-i vaateakna ühikud on asendamatu tööriist tõeliselt reageerivate ja skaleeritavate veebidisainide loomiseks, mis kohanduvad sujuvalt iga seadmega. Mõistes vw, vh, vmin, vmax, vi ja vb funktsionaalsust ning järgides parimaid tavasid, saate avada vaateakna ühikute täieliku potentsiaali ning luua visuaalselt atraktiivseid ja kasutajasõbralikke veebisaite, mis pakuvad ühtlast kogemust kõigil platvormidel. Võtke need ühikud omaks, et luua veebikogemusi, mis on globaalselt ligipääsetavad ja esteetiliselt meeldivad, olenemata kasutaja seadmest või kultuurilisest taustast.

Pidage meeles, et testige põhjalikult erinevates brauserites ja seadmetes ning seadke alati esikohale ligipääsetavus, et tagada oma disainide kaasavus ja kasutatavus kõigile.